<template>
	<div class="cash-chart-box">
		<div id="cashChart"></div>
	</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";
import { xjl } from "../service";
// 月份
let timeArr = ref([]);
let dataArr = ref([
	//   2000, 2500, 3400, 4400, 6500, 5700, 5000, 4200, 5200, 6300, 6800, 7500,
]);

let options = reactive({
	grid: {
		right: "15%",
		top: "10%",
		bottom: "15%",
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "shadow",
		},
		backgroundColor: "rgba(216, 240, 255, 0.1)",
		textStyle: {
			color: "#ffffff",
			textShadowColor: "#000000",
			textShadowOffsetY: 2,
			textShadowBlur: 4,
		},
		padding: [0, 10, 0, 10],
		borderWidth: 2,
		borderColor: "#6e7a83",
		formatter: (params) => {
			let res = "";
			for (let i = 0; i < params.length; i++) {
				res += `<span style="color:#FFDA3A">${params[i].value}</span>`;
			}
			return res;
		},
	},
	xAxis: {
		type: "category",
		data: timeArr.value,
		name: "单位（月）",
		nameTextStyle: {
			color: "#D3E3FF",
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
		axisLabel: {
			color: "rgba(176,215,255,0.4)",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（万元）",
			nameTextStyle: {
				color: "#D3E3FF",
			},
			axisLabel: {
				color: "rgba(216,240,255,0.8)",
			},
			splitLine: {
				lineStyle: {
					color: "rgba(176,215,255,0.25)",
					type: "dashed",
				},
			},
		},
	],
	series: [
		{
			type: "line",
			smooth: true,
			data: dataArr.value,
			showSymbol: false,
			lineStyle: {
				color: "#1978E5",
			},
			areaStyle: {
				color: {
					x: 0, //右
					y: 0, //下
					x2: 0, //左
					y2: 1, //上
					colorStops: [
						{
							offset: 0,
							color: "rgba(0,150,255,0.25)",
						},
						{
							offset: 1,
							color: "rgba(0,150,255,0)",
						},
					],
				},
			},
		},
	],
});

let cashChartRef = null;
let initCashChartData = () => {
	const currentYear = new Date().getFullYear();
	xjl({ year: currentYear })
		.then((resp = []) => {
			const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				arr2 = new Array(12).fill("0.00");
			resp.map((k) => {
				const { balance = 0, month = 1 } = k;
				arr2[month - 1] = changeNumToWan(balance);
				// arr1.push(month);
				// arr2.push(changeNumToWan(balance));
			});
			timeArr.value.splice(0);
			timeArr.value.push(...arr1);
			dataArr.value.splice(0);
			dataArr.value.push(...arr2);
			cashChartRef.setOption(options);
		})
		.catch((e) => {});
};
const initCashChart = () => {
	cashChartRef = echarts.init(document.getElementById("cashChart"));
	initCashChartData();
};
defineExpose({
	initCashChart,
});
</script>
<style lang="scss" scoped>
.cash-chart-box {
	width: 100%;
	height: 100%;
	#cashChart {
		width: 100%;
		height: 100%;
	}
}
</style>
